<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{$t('pageTitle.receiptRecord')}}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="userId" label="">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="6">-->
                        <!--<el-form-item prop="repayBankAccount" label="">-->
                            <!--<el-input v-model="form.repayBankAccount" :placeholder="$t('common.repayAccount')" clearable></el-input>&lt;!&ndash;还款账号&ndash;&gt;-->
                        <!--</el-form-item>-->
                    <!--</el-col>-->
                    <el-col :span="4">
                        <el-form-item prop="userPhone" label="">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable></el-input><!--手机号码-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="orderId" label="">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable></el-input><!--内部订单号-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="status" label="">
                            <el-select v-model="form.status" clearable :placeholder="$t('common.overdueStatus')" style="width: 100%"><!--逾期状态-->
                                <el-option key="1" :label="$t('common.hasOverdue')" value="1"></el-option>
                                <el-option key="0" :label="$t('common.notOverdue')" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="contractNumber" label="">
                            <el-input v-model="form.contractNumber" :placeholder="$t('common.paymentSerialNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="channelCompany" label="">
                            <el-select v-model="form.channelCompany" @change="getChannelPayWay('repayChannel')" clearable :placeholder="$t('common.payChannel')" style="width: 100%"><!--支付渠道-->
                                <el-option v-for="item in payWayList" :key="item.nameCode" :label="item.name" :value="item.nameCode + ''"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" >
                        <el-form-item prop="repayChannel" label="">
                            <el-select v-model="form.repayChannel" clearable :placeholder="$t('common.payMethod')" style="width: 100%"><!--交易方式-->
                                <el-option v-for="item in payChannelList" :key="item.nameCode" :label="item.name" :value="item.nameCode + ''"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="actualRepayTime" label=""><!--支付时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.actualRepayTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.paymentStartTime')"
                                    :end-placeholder="$t('common.paymentEndTime')"
                                    clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item v-else prop="kana"> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <!--还款类型-->
                     <el-col :span="4">
                         <el-form-item prop="receiptType" label="">
                             <el-select v-model="form.receiptType" :placeholder="$t('common.collectionType')" clearable style="width: 100%">
                                 <el-option v-for="item in keyMap.collectionType" :key="item.value" :value="item.value" :label="item.label"></el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>

                </el-row>
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="status" label="">
                            <el-select v-model="form.cancelStatus" clearable :placeholder="$t('finance.repayRecordState')" style="width: 100%"><!--还款方式-->
                                <el-option value="0" :label="$t('finance.repayNotCancel')"></el-option>
                                <el-option value="1" :label="$t('finance.canceedlRepay')"></el-option>                            
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" :disabled="tableData.length<=0" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                        <el-table-column label="UserId" prop="userId" min-width="140"></el-table-column>
                        <el-table-column prop="userType" :label="$t('common.userType')" width="150"><!--用户类型-->
                            <template slot-scope="scope">
                                <span>{{ scope.row.userType | switchUserType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.name')"  prop="userName" min-width="150"></el-table-column><!--姓名-->
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" width="150"></el-table-column><!--手机号码-->
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" width="200"></el-table-column><!--内部订单号-->
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->

                        <el-table-column :label="$t('common.paymentId')" prop="thirdPartyOrderId" width="200"></el-table-column><!--支付ID-->
                        <el-table-column :label="$t('common.payChannel')" prop="channelCompany" width="120"><!--支付渠道-->
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.payMethod')" prop="repayChannel" width="150">
                            <template slot-scope="{ row }">{{ row.repayChannel | SwitchLoanChannel }}</template><!--支付方式-->
                        </el-table-column>
                         <el-table-column :label="$t('common.paymentSerialNumber')" prop="contractNumber" min-width="170"> <!--支付序列号--></el-table-column>
                         <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" width="100">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="loanPeriod" width="100">
                            <template slot-scope="{ row }">{{ row.loanPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanAmount')" prop="loanAmount" width="100">
                            <template slot-scope="{ row }">{{ row.loanAmount | formatCurrency }}</template><!--放款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.shouldRepayPrincipalAndInterest')" prop="lateRepay" width="120"><!--应还本息-->
                            <template slot-scope="{ row }">{{ row.lateRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.originalRestRepay')" prop="oldRestRepay" width="120"><!--原挂账金额-->
                            <template slot-scope="{ row }">{{ row.oldRestRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.remainingRestRepay')" prop="restRepay" width="120"><!--剩余挂账金额-->
                            <template slot-scope="{ row }">{{ row.restRepay | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.writeOffAmount')" prop="writeOffAmount" width="100"><!--销账金额-->
                            <template slot-scope="{ row }">{{ row.writeOffAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.paymentAmount')" prop="repayAmount" width="100"><!--支付金额-->
                            <template slot-scope="{ row }">{{ row.repayAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.paymentFee')" prop="repayFee" width="120"><!--支付手续费-->
                            <template slot-scope="{ row }">{{ row.repayFee | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.addFee')" prop="tax" width="100"><!--增值税-->
                            <template slot-scope="{ row }">{{ row.tax | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.actualCreditAmount')" prop="repayFee" width="120"><!--实际入账金额-->
                            <template slot-scope="{ row }">{{ (Number(row.repayAmount) - Number(row.repayFee) - Number(row.tax)).toFixed(2) | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.shouldRepayTime')" prop="repayTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--应还时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.actPaymentTime')" prop="actualRepayTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.actualRepayTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--实际支付时间-->
                        </el-table-column>
<!--                        <el-table-column :label="$t('common.loanRate')" prop="interest" width="120">
                            <template slot-scope="{ row }">{{ row.interest | formatCurrency }}</template>&lt;!&ndash;利息&ndash;&gt;
                        </el-table-column>-->
                        <el-table-column :label="$t('common.penaltyRate')" prop="lateCharge" width="100">
                            <template slot-scope="{ row }">{{ row.lateCharge | formatCurrency }}</template><!--罚息-->
                        </el-table-column>
                        <el-table-column :label="$t('common.lateFee')" prop="lateFee" width="100">
                            <template slot-scope="{ row }">{{ row.lateFee | formatCurrency }}</template><!--滞纳金-->
                        </el-table-column>
<!--                        <el-table-column :label="$t('common.platformCreditFee')" prop="creditServiceFee" min-width="160">&lt;!&ndash;平台征信费&ndash;&gt;
                            <template slot-scope="{ row }">{{ row.creditServiceFee | formatCurrency }}</template>
                        </el-table-column>-->
<!--                        <el-table-column :label="$t('finance.platformServiceFee')" prop="platformServiceFee" min-width="120">&lt;!&ndash;平台服务费&ndash;&gt;
                            <template slot-scope="{ row }">{{ row.platformServiceFee | formatCurrency }}</template>
                        </el-table-column>-->
<!--                        <el-table-column :label="$t('finance.accountManagementFee')" prop="accountServiceFee" min-width="120">&lt;!&ndash;账户管理费&ndash;&gt;
                            <template slot-scope="{ row }">{{ row.accountServiceFee | formatCurrency }}</template>
                        </el-table-column>-->
<!--                        <el-table-column :label="$t('finance.riskManagementFee')" prop="riskServiceFee" min-width="120">&lt;!&ndash;风险管理费&ndash;&gt;
                            <template slot-scope="{ row }">{{ row.riskServiceFee | formatCurrency }}</template>
                        </el-table-column>-->
<!--                        <el-table-column :label="$t('finance.beheadedInterest')" prop="headInterest" min-width="120">
                            <template slot-scope="{ row }">{{ row.headInterest | formatCurrency }}</template> &lt;!&ndash;砍头息费&ndash;&gt;
                        </el-table-column>-->
                        <el-table-column :label="$t('common.overdueDays')" prop="lateDays" width="100"><!--逾期天数-->
                            <template slot-scope="{ row }">{{ row.lateDays ? (row.lateDays + $t('common.day')) : '--' }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.remitAmount')" prop="csDerateAmount" min-width="100"><!--减免金额-->
                            <template slot-scope="{ row }">{{ row.csDerateAmount | formatCurrency }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.applyDate')" prop="applyTime" width="180">
                            <template slot-scope="{ row }">{{ row.applyTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请日期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.loanCompleteTime')" prop="loanCompletionTime" width="180">
                            <template slot-scope="{ row }">{{ row.loanCompletionTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--放款成功时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" width="150"></el-table-column><!--收款账号-->
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="bankName" width="150"></el-table-column><!--收款账号银行-->
                        
                        <el-table-column :label="$t('common.collectionType')" prop="receiptType" min-width="180"><!--放款类型-->
                            <template slot-scope="{ row }">{{ row.receiptType | SwitchCollectionType }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.operation')" width="140" v-if="domain!='Bene'">
                            <template slot-scope="{ row }">
                                <el-button type="primary" @click="showCacelRepay(row)" :disabled="row.canOperation==0||row.cancelStatus==1||row.receiptType==2">{{row.cancelStatus==1?`${$t('finance.canceled')}`:`${$t('finance.cancelRepay')}`}}</el-button>
                            </template><!--操作-->
                        </el-table-column>
                        <el-table-column :label="$t('finance.cancelRepayTime')" prop="cancelTime" width="180">
                            <template slot-scope="{ row }">{{ row.cancelTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--取消还款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.operator')" prop="systemUsername" min-width="180"><!--操作人-->
                            <template slot-scope="{ row }">{{ row.systemUsername }}</template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->
        <cancelRepayDialog @submint="cancelRepaySub" ref="cancelRepay"></cancelRepayDialog>
    </div>
</template>

<script src="./main.js"></script>
<style lang="scss" scoped>

</style>
